<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="generator" content="www.jsdaima.com"
	data-variable=",cn,10001,,10001,M1156015" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>学员查看</title>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"
	rel="external nofollow" />
<link rel='stylesheet' href='css/index.css'>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
axios.interceptors.response.use(function (response) {
	console.log(response);
	console.log(response.headers);
	console.info("状态码："+response.data.code);
	if (response.data.code===500){
		window.location.href="/error/500.html";
	}
	return response;
}, function (error) {
	return Promise.reject(error);
});
</script>
<!-- css样式文件 -->
<style type="text/css">
html, body, .containter {
	width: 100%;
	height: 500px;
	margin: 0 auto;
	box-shadow: 0 1px 5px #aaa;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

#container {
	width: 100%;
	height: 95%;
	float: left;
	box-sizing: border-box;
	padding: 0px;
	box-shadow: 0 1px 5px #aaa;
}

.info_ul {
	margin: 0 0 5px 0;
	padding: 0.2em 0;
}

.info_ui_Nimg {
	background-image: url("images/YNormal.png");
	background-position: 97% 0%;
	background-repeat: no-repeat;
	background-size: 40px;
}

.info_li {
	line-height: 26px;
	font-size: 15px;
	color: #0C8816;
}

.info_lierr {
	line-height: 26px;
	font-size: 15px;
	color: #D81E06;
	border: none;
}

.info_span {
	width: 80px;
	display: inline-block;
}

.btn {
	width: 80px;
	text-align: center;
	height: 30px;
	line-height: 30px;
	border-radius: 5px;
	cursor: pointer;
	background-color: #D81E06;
	color: #fff;
	margin: 0 auto;
}

.ta-c {
	text-align: center;
	margin-top: 10px;
}
</style>
<!-- js文件 -->
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=B0N7sNh1CriFnUEaqC8VXstshDLGkDxz"></script>
<!-- 页面地图js方法 -->

</head>

<body class=" nav-header">

	<header class="">
		<div class="head-box">
			<div class="container">
				<div class="head-left">
					<div class="head-left-wrapper">
						<div class="head-left-slide">
							<p>欢迎光临全民健身！</p>

						</div>
					</div>
				</div>
				<div class="head-right">
					<div class="head-other">
						<b> 登录/注册 <i class="caret"> </i>
						</b> <span> <a href="login.html" title="登录"> <i
								class="fa fa-bookmark"> </i> 登录
						</a>
							<hr /> <a href="regist.html" title="注册"> <i
								class="fa fa-book"> </i> 注册
						</a>
						</span>
					</div>
				</div>
			</div>
		</div>
	</header>
	<nav class="navbar navbar-default met-nav " role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button"
					class="navbar-toggle hamburger hamburger-close collapsed"
					data-target="#navbar-default-collapse" data-toggle="collapse">
					<span class="sr-only"> Toggle navigation </span> <span
						class="hamburger-bar"> </span>
				</button>
				<a href="#" class="navbar-brand navbar-logo vertical-align" title="">
					<h1 class='hide'>全民健身</h1>
					<div class="vertical-align-middle">
						<img src="picture/logo.png" alt="" title="" />
					</div>
				</a>
				<h2 class='hide'></h2>
			</div>
			<div class="collapse navbar-collapse navbar-collapse-toolbar"
				id="navbar-default-collapse">

				<ul class="nav navbar-nav navbar-right navlist">
					<li class="margin-right-20"><a href="index.html" title="首页"
						class="link "> 首页 </a></li>
					<li class="dropdown margin-right-20"><a class="link  "
						href="findCoach.html"> 教练信息 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link active"
						href="findVenue.html"> 场馆信息 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
						href="relationship.html"> 关注 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
						href="notice.html"> 通知 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
						href="usercenter/index.html"> 个人中心 </a>
						<ul style="display: none">
						</ul></li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="containter">
		<!-- 地图盒子 -->
		<div id="container"></div>
	</div>

	<!-- 页面地图js方法 -->

	<script type="text/javascript">
		var points;
		$.ajax({
			url : "/venue/selectAll",
			contentType : "application/json; charset=utf-8",
			async : false,
			type : "get",
			dataType : "json",
			success : function(result) {
				points = result.data
				console.log(points);
			},
		});

		// 在指定容器创建地图实例并设置最大最小缩放级别
		var map = new BMap.Map("container", {
			minZoom : 5,
			maxZoom : 19
		});

		//初始化地图，设置中心点和显示级别
		//map.centerAndZoom(new BMap.Point(116.316967, 39.990748), 15);

		//定位成功事件
		//var myKeys=[];
		var myKeys = '';
		var lng = ''; //精度
		var lat = ''; //纬度
		// 百度地图API功能
		var map = new BMap.Map("container");
		var point = new BMap.Point(108.95, 34.27);
		map.centerAndZoom(point, 12);
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r) {
			console.log(r.point)
			if (this.getStatus() == BMAP_STATUS_SUCCESS) {
				var mk = new BMap.Marker(r.point);
				map.addOverlay(mk);//标出所在地
				map.panTo(r.point);//地图中心移动
				//alert('您的位置：'+r.point.lng+','+r.point.lat);
				lng = r.point.lng;
				lat = r.point.lat;
				var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
				var gc = new BMap.Geocoder();
				gc.getLocation(point, function(rs) {
					var addComp = rs.addressComponents;
					console.log(rs.address);//地址信息
					//myKeys = [rs.address];     当有其他信息时，可以定义成数组
					myKeys = rs.address;
					//alert(myKeys);         //弹出所在地址
					var local = new BMap.LocalSearch(map, {
						renderOptions : {
							map : map,
							panel : "r-result"
						},
						pageCapacity : 3
					});
					local.searchInBounds(myKeys, map.getBounds());
				});
			} else {
				alert('failed' + this.getStatus());
			}
		}, {
			enableHighAccuracy : true
		})

		//开启鼠标滚轮缩放功能，仅对PC上有效
		map.enableScrollWheelZoom(true);

		// 将控件（平移缩放控件）添加到地图上
		map.addControl(new BMap.NavigationControl());

		//添加标注
		addMarker(points);

		// 创建图标对象
		function addMarker(points) {
			var point, marker;
			// 创建标注对象并添加到地图
			for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
				point = new BMap.Point(points[i].longitude, points[i].latitude);
				var myIcon;
				// 判断正常或者故障，根据不同装填显示不同Icon

				myIcon = new BMap.Icon("images/normal.png", new BMap.Size(32,
						32), {
					// 指定定位位置
					offset : new BMap.Size(16, 32),
				// 当需要从一幅较大的图片中截取某部分作为标注图标时，需要指定大图的偏移位置
				//imageOffset: new BMap.Size(0, -12 * 25)
				});

				// 创建一个图像标注实例
				marker = new BMap.Marker(point, {
					icon : myIcon
				});
				// 将覆盖物添加到地图上
				map.addOverlay(marker);

				//给标注点添加点击事件
				(function() {
					var thePoint = points[i];
					marker.addEventListener("click", function() {
						showInfo(this, thePoint);
					});
				})();
			}
		};

		//显示信息窗口，显示标注点的信息
		function showInfo(thisMaker, point) {
			var sContent = '';
			sContent += '<ul class="info_ul info_ui_Nimg">';
			sContent += '   <li class="info_li">';
			sContent += '       <span class="info_span">场馆名字：</span>';
			sContent += '       <span>' + point.vname + '</span>';
			sContent += '   </li>';
			sContent += '   <li class="info_li">';
			sContent += '       <span class="info_span">所在地点：</span>';
			sContent += '       <span>' + point.address + '</span>';
			sContent += '   </li>';
			sContent += '   <li class="info_li">';
			sContent += '       <span class="info_span">学员详情：</span>';
			sContent += '       <span><button onclick="detail(' + point.vid
					+ ')" class="btn btn-outline-primary">请点击</button></span>';
			sContent += '   </li>';
			sContent += '</ul>';

			// 创建信息窗口对象
			var infoWindow = new BMap.InfoWindow(sContent);

			//图片加载完毕重绘infowindow
			thisMaker.openInfoWindow(infoWindow);
		};

		// 弹窗增加点击事件
		function func(data) {
			alert("点击了机器编号为：" + data + "\n已经提交检修");
		}
	</script>
	<div class="met-footnav">
		<div class="container">
			<div class="row mob-masonry">
				<div class="col-md-2 col-sm-3 col-xs-6 list masonry-item">
					<h4>
						<a href="#" title="关于我们"> 关于我们 </a>
					</h4>

				</div>
				<div class="col-md-2 col-sm-3 col-xs-6 list masonry-item">
					<h4>
						<a href="#" title="新闻资讯"> 新闻资讯 </a>
					</h4>

				</div>
				<div class="col-md-2 col-sm-3 col-xs-6 list masonry-item">
					<h4>
						<a> 会馆信息 </a>
					</h4>

				</div>
				<div class="col-md-2 col-sm-3 col-xs-6 list masonry-item">
					<h4>
						<a> 更多 </a>
					</h4>
				</div>
				<div class="col-md-4 col-ms-12 col-xs-12 info masonry-item">
					<div class="info-phone">
						<b> 服务热线 </b> <em> <a> 400-123-4567 </a>
						</em>
						<p>客服服务时段：周一至周五，9:30 - 20:30，节假日休息</p>

					</div>
				</div>
			</div>
		</div>
	</div>

	<footer>
		<div class="container text-center">
			<div class="powered_by_metinfo">Copyright &copy; 2002-2020 全民健身
				版权所有</div>
		</div>
	</footer>
	<button type="button"
		class="btn btn-icon btn-primary btn-squared met-scroll-top hide">
		<i class="icon wb-chevron-up" aria-hidden="true"> </i>
	</button>
	<script src="js/index.js"></script>
	<script type="text/javascript">
		function detail(vid) {
			console.log(vid);
			$.ajax({
				type : "get",
				dataType : "json",
				url : "/venue/find/" + vid,
				success : function(result) {
					console.log(result);
					if (result.code == 300) {
						alert("非好友不能查看详情");
					} else {
						location.href = "venuedetails.html?vid=" + vid;
					}
				}
			})
		}
	</script>
</body>
</html>